import { getAppNav } from '@/App'
import ILoginForm from '@/model/form/user/ILoginForm'
import { Button, Form, Typography } from '@douyinfe/semi-ui'

export interface IPasswordLogin {
  submitClick: (form: ILoginForm) => void
  loading: boolean
}

export default function PasswordLogin(props: IPasswordLogin) {
  return (
    <Form
      disabled={props.loading}
      className="w-300 m-t-10"
      onSubmit={(form) => {
        if (props.loading) return
        props.submitClick(form as ILoginForm)
      }}
    >
      <Form.Input
        field="account"
        placeholder="邮箱/手机号"
        noLabel
        rules={[{ required: true, message: '请输入邮箱/手机号' }]}
        showClear
      />
      <Form.Input
        field="password"
        placeholder="密码"
        noLabel
        rules={[{ required: true, message: '请输入密码' }]}
        showClear
        mode="password"
      />
      <div className="flex jc-sb">
        <Form.Checkbox field="rememberMe" noLabel>
          记住我
        </Form.Checkbox>
        <Form.Checkbox field="hiddenFlag" noLabel>
          隐身登录
        </Form.Checkbox>
      </div>
      <Button
        block
        size="large"
        loading={props.loading}
        htmlType="submit"
        className="m-t-10"
      >
        登 录
      </Button>
      <Button
        disabled={props.loading}
        block
        type="warning"
        className="m-t-10"
        onClick={() => getAppNav()('/register')}
      >
        去注册
      </Button>
      <div className="flex jc-e m-t-10">
        <Typography.Text
          link={!props.loading}
          disabled={props.loading}
          onClick={() => {
            if (props.loading) return
            getAppNav()('/forgotPasswordSend')
          }}
        >
          忘记密码
        </Typography.Text>
      </div>
    </Form>
  )
}
